// 子窗体配置
import { useCallback, useMemo, useRef, forwardRef, useImperativeHandle, Ref } from 'react';
import { Form, Select, Row, Col } from 'antd';
import EditableTable, { IColumns } from '@inbiz/basic/EditableTable';
import { uuid } from '@inbiz/utils';
import { SizeInput } from '@inbiz/react-settings-form';
import { getMessage } from '@inbiz/react';
import { options as operationOptions } from './operation';
const options = [
  { value: 'right', label: '右对齐' },
  { value: 'left', label: '左对齐' },
  { value: 'center', label: '居中对齐' },
];
export type ISubwindowRef = {
  getValue: () => Promise<ISubwindowData>;
};
function SubwindowData(
  {
    value,
    parentOptions,
  }: {
    value?: ISubwindowData;
    parentOptions: {
      value: string;
      label: string;
    }[];
  },
  ref: Ref<ISubwindowRef>,
) {
  const [form] = Form.useForm();
  const tableRef = useRef<any>(null);
  const initialValues = useMemo(() => {
    return {
      position: value?.position || 'right',
      width: '60%',
      height: '60%',
      showType: 1,
      ...(value || {}),
    };
  }, [value]);

  const columns = useMemo(() => {
    return [
      {
        dataIndex: 'parent',
        title: '父级操作',
        editData: {
          type: 'Select',
          allowClear: true,
          defaultOpen: true,
          rules: [{ required: true }],
          options: parentOptions.map((item) => ({ ...item, label: getMessage(item.label) })),
        },
      },
      {
        dataIndex: 'type',
        title: '操作类型',
        editData: {
          type: 'Select',
          allowClear: true,
          defaultOpen: true,
          options: [
            { label: '保存', value: 'save' },
            { label: '取消', value: 'cancel' },
            { label: '自定义', value: 'custom' },
          ],
          rules: [{ required: true }],
          afterEdit: (value, recerd) => {
            recerd.name = 'EformButtonGroup.button.' + value;
            return recerd;
          },
        },
      },
      {
        title: '操作名称',
        dataIndex: 'name',
        editData: {
          type: 'MultilingualInput',
          rules: [{ required: true }],
        },
      },
      {
        title: '按钮图标',
        dataIndex: 'icon',
        editData: {
          type: 'IconPicker',
          showIconSize: false,
          showColorPicker: false,
        },
      },
    ] as IColumns;
  }, [parentOptions]);

  const handleAdd = useCallback(() => {
    return { id: uuid(10, 5), type: 'custom' };
  }, []);

  useImperativeHandle(
    ref,
    () => ({
      getValue: async () => {
        const formData = form.getFieldsValue(true);
        const list = await tableRef.current!.getData();
        return {
          ...formData,
          list,
        };
      },
    }),
    [],
  );
  const dataSource = useMemo(() => value?.list || [], [value?.list]);
  return (
    <div>
      <Form form={form} initialValues={initialValues} colon={false} labelAlign="left">
        <Row gutter={24}>
          <Col span={9}>
            <Form.Item name="width" label="窗口宽度" labelCol={{ span: 6 }}>
              {/* @ts-ignore */}
              <SizeInput filter={['inherit', 'auto']} />
            </Form.Item>
          </Col>
          <Col span={8} offset={4}>
            <Form.Item name="height" label="窗口高度">
              {/* @ts-ignore */}
              <SizeInput filter={['inherit', 'auto']} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={9}>
            <Form.Item name="showType" label="操作按钮显示" labelCol={{ span: 6 }}>
              <Select options={operationOptions} />
            </Form.Item>
          </Col>

          <Col span={8} offset={4}>
            <Form.Item name="position" label="按钮位置">
              <Select options={options} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <EditableTable
        className="editable-table"
        dataSource={dataSource}
        rowKey={'id'}
        columns={columns}
        onAdd={handleAdd}
        scroll={{ y: 260 }}
        ref={tableRef}
      />
    </div>
  );
}

export default forwardRef(SubwindowData);

export type ISubwindowData = {
  width?: string;
  height?: string;
  position?: 'left' | 'right' | 'center';
  showType: 1 | 2 | 3; //按钮显示类型 1 文字, 2 图标 ，文字图标
  list?: {
    type: 'save' | 'custom' | 'cancel';
    parent: string;
    name: string;
    id: string;
    icon?: { color: string; type: string }; //图
  }[];
};
